<template>
  <div>
    <div class="dialog-container">
         <div class="top-container">
           <div class="search-condition">检索条件：{{filterConditions}}</div>
           <div>
             <div>
               <el-button type="primary" size="mini" @click="search">检索</el-button>
               <el-button size="mini">重置</el-button>
             </div>
             <div class="result-checked-wrap">
               <el-checkbox v-model="resultChecked">在结果中检索</el-checkbox>
             </div>
           </div>
         </div>
         <div  class="popover">
           <el-popover
             placement="bottom"
             width="200"
             trigger="click">
             <div class="checkbox-wrap">
               <el-checkbox-group v-model="checkList">
                 <el-checkbox
                   v-for="(item,index) in tableList"
                   :key="index"
                   :label="item.label"
                 ></el-checkbox>
               </el-checkbox-group>
             </div>
             <el-button  slot="reference" size="mini">设置</el-button>
           </el-popover>
         </div>
         <Tables
           :tableData="sortList"
           :tableLabel="tableLabel"
           :border="true"
           :handleOperaView="handleOperaView"
           :handleOperaBrowse="handleOperaBrowse"
         ></Tables>
       </div>
    <!-- 检索弹窗   -->
    <el-dialog
      title=""
      :visible.sync="smallSearchDialogVisible"
      width="30%"
      :before-close="closeSmallSearchDialog"
    >
      <div>
        <searchCate
          :treeData="treeData"
          @loadFilterLabel="loadFilterLabel"
        ></searchCate>
        <searchFilters
          class="search-filters"
          :filter1="filter1"
          :filter2="filter2"
          :filter4="filter4"
          @getSave="getSave"
          @handleEmptyData="handleEmptyData"
          btn1="确定"
          btn2="重置"
          small="small"
          :closeSmallSearchDialog="closeSmallSearchDialog"
        ></searchFilters>
      </div>
      <span slot="footer" class="dialog-footer">
      </span>
    </el-dialog>
    <!-- 查看弹窗   -->
    <viewDialog
      :viewDialogVisible="viewDialogVisible"
      :viewTreeData="viewTreeData"
      :infoData="infoData"
      :viewRow="viewRow"
      :getViewForm="getViewForm"
      @closeViewDia="closeViewDia"
    ></viewDialog>
  </div>
</template>

<script>
import searchCate from '@/views/search/advanced/components/searchCate'
import searchFilters from '@/components/searchFilters'
import Tables from '@/components/Tables'
import viewDialog from '@/views/search/advanced/components/viewDialog'
import { getViewTreeForm, getViewTreeList } from '@/api/search/advanced'
export default {
  name: 'searchDialog',
  components:{
    searchCate,
    searchFilters,
    Tables,
    viewDialog
  },
  props:['searchDialogVisible','filterConditions','tableLabel','tableList','handleCheckChange','filter1','filter2','filter4','treeData','loadFilterLabel','handleEmptyData','getSave','sortList'],
  data(){
    return {
      smallSearchDialogVisible:false,
      resultChecked:false,
      checkList:[],
      viewDialogVisible:false,
      viewTreeData:[
        {
          tableName:'1',
          id:'1'
        }
      ],
      infoData:[],
      viewRow:{},
    }
  },
  methods:{
    handleClose(){
      this.$emit('closeDialog')
    },
    // 点击检索
    search(){
      this.smallSearchDialogVisible = true
    },
    // 关闭检索弹窗
    closeSmallSearchDialog(){
      this.smallSearchDialogVisible = false
      this.$bus.$emit('handleSmallSearchClose')
    },
    // 点击查看
    async handleOperaView(row){
      this.viewRow = row
      this.viewDialogVisible = true
      const res = await getViewTreeList({recNo:row.recNo})
      this.viewTreeData = [res.data]
      await this.getViewForm()
    },

    //获取表单详情数据
    async getViewForm(data){
      const params = {}
      params.id = data ? data.id : this.viewRow.pikId
      params.tableName = data ? data.tableName : this.viewRow.tableName
      const res = await getViewTreeForm(params)
      this.infoData = res.data
    },

    // 关闭查看弹窗
    closeViewDia(){
      this.viewDialogVisible = false
    },
    handleOperaBrowse(row){
      console.log(row)
      this.$router.push({
        path:'/system/img',
        query:{
          sortNo:row.sortNo,
        }
      })
    }
  },
  watch:{
    tableList:{
      immediate:true,
      handler(val){
        // console.log(177,val)
        this.checkList = this.tableList.map(item => item.label)
      }
    },
    checkList:{
      immediate:true,
      handler(val){
        // console.log(184,val)
        this.handleCheckChange(val)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.top-container{
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  .search-condition{
    font-size: 14px;
  }
  .result-checked-wrap{
    padding-top: 10px;
  }

}

.popover{
  width: 100%;
  text-align: right;
  padding-bottom: 10px;
  padding-right: 60px;
}
.search-filters{
  padding-top: 20px;
}
::v-deep .el-checkbox__label{
  font-size: 12px;
}
::v-deep .el-checkbox{
  display: block;
}
</style>
